<template>
  <div class="header-right">
    <div class="search-bar">
      <a-search @search="onSearch" show-action :keyword="keyword"></a-search>
    </div>
    <div class="toggle-btn" v-if="!sidebarIsOpen" @click="toggleSideBar">
      <van-icon name="bars" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    sidebarIsOpen: {
      type: Boolean,
      default: true,
    },
  },
  data(){
    return{
        keyword:''
    }
  },
  methods: {
    onSearch(keyword) {
      this.$router.push("/search/?keyword=" + keyword);
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
  },
};
</script>

<style>
</style>